<template>
  <div>
    <div>{{wordCount}}</div>
    <div class="canvas-editor"></div>
  </div>
</template>
<script>
import Editor, {RowFlex} from '@hufe921/canvas-editor'
export default {
  name: 'CanvasEditor',
  data () {
    return {
      msg: 'CanvasEditor',
      editor: null
    }
  },
  computed: {
    wordCount () {
      return 0
    }
  },
  mounted () {
    this.editor = new Editor(document.querySelector('.canvas-editor'), {
      header: [{
        value: '页眉',
        rowFlex: RowFlex.CENTER
      }],
      main: [{
        value: 'Hello World'
      }],
      footer: [{
        value: '页脚',
        size: 12
      }]
    }, {})
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
